<template>
    <div class="page">
        <div class="order">
            <div class="order-title">
                <div class="order-title-left">
                    <span class="orderNumber">订单编号：{{item.order_no}}</span>
                </div>
            </div>
            <div class="orderContent" >
                <div class="orderContent-left">
                    <img :src="item.img" alt="">
                </div>
                <div class="orderContent-right">
                    <strong class="orderContent-right-top">{{item.name}}</strong>
                    <span class="orderContent-right-middle">黑色现货:L</span>
                    <div class="orderContent-right-bottom">
                        <div class="price">
                            <span>￥{{item.sell_price}}</span>
                        </div>
                        <div>x{{item.goods_nums}}</div>
                    </div>
                </div>
            </div>
            <div class="order-price">
                <span></span>
                <p>商订单金额 : {{item.sell_price}}</p>
            </div>
            <div class="orderBottom">
                <div class="orderBottom-left">
                    <!-- <img src="@/assets/微信.png" alt=""> -->
                    <!-- <img src="@/assets/微信.png" alt=""> -->
                </div>
                <div class="orderBottom-right">
                    <span @click="toProductDetails">再次购买</span>
                    <span @click="topingjia">评价商品</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
    </div>
</template>
<script>
export default {
    props: {
        item:Object,
        details:{}
    },
    methods:{
        toProductDetails(){
            this.$router.push({
                name:'ProductDetails',
                params:{
                    id: this.item.id,
                }
            })
        },
        topingjia(){
            this.$router.push({
                name:"pingjia",
                params:{
                    id: this.item.order_goods_id,
                }
            })
        }
    },
}
</script>
<style scoped>
    .order{padding: 0.25rem}
    .order-title{display: flex;justify-content: space-between;}
    .order-title-left{display: flex;align-items: center;}
    .orderNumber{margin-left: 0.2rem;}
    .orderContent-left{width: 2.28rem;height: 2.28rem;border: 1px solid #e6e6e6;display: flex;justify-content: center;align-items: center;}
    .orderContent-left img{width: 100%;height: 100%;}
    .orderContent{display: flex;justify-content: space-between;margin-top: 0.2rem;padding: 0.2rem 0;border: 1px solid #e6e6ee;border-left: none;border-right: none}
    .orderContent-right{margin-left: 0.25rem;flex: 1;display: flex;justify-content: space-between;flex-direction: column;}
    .orderContent-right-top{font-size: 0.3rem;}
    .orderContent-right-bottom{display: flex;justify-content: space-between;align-items: center;}
    .price span{font-size: 0.36rem;color: #F52E67}
    .price del{font-size: 0.26rem;color: #B3B5B8}
    .order-price{display: flex;justify-content: space-between;font-size: 0.26rem;margin-top: 0.25rem;}
    .order-price span:nth-child(1){color: salmon}
    .null{height: 0.2rem;background: #F5F6F7;}
    .orderContent-right-middle{background: #F5F5F6;width: 1.5rem;color: #B9BABD;padding: 2px}
    .orderBottom{display: flex;justify-content: space-between;margin-top: 0.3rem;align-items: center;}
    .orderBottom-left img{width: 0.6rem;height: 0.6rem;border-radius:50%; }
    .orderBottom-right span{color: #F52E67;font-size: 0.28rem;}
    .orderBottom-right span:nth-child(1){margin-right: 0.2rem;}
</style>


